<template>
  <div class="main demo">
    <div class="search">
      <el-row :gutter="1">
          <div class="setting">
            <el-tooltip
                class="box-item"
                effect="light"
                content="请在utools设置窗口开启暗黑主题"
                placement="top-start">
              <el-switch
                  v-model="isDark" @change="toggleDark()"
                  inline-prompt
                  size="default"
                  active-text="暗黑"
                  inactive-text="明亮">
              </el-switch>
            </el-tooltip>
          </div>
          <el-input placeholder="请输入要查询的汉字（图解为98版）"
                    class="w-50 m-2"
                    autofocus="true"
                    maxlength="20"
                    v-model="word" clearable
                    @input="handleSearch"
                    @change="handleSearch">
            <template #prefix>
              <el-icon> <Search /> </el-icon>
            </template>
          </el-input>
      </el-row>
      <spn v-show="showMsg" class="msg">{{errMsg}}</spn>
      <div id="tool-result" class="tool-result hide" v-show="showResult">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="hanzi" label="汉字" width="60" align="center"/>
          <el-table-column prop="xsj" label="新世纪" width="70" align="center"/>
          <el-table-column prop="c86" label="86编码" width="70" align="center"/>
          <el-table-column prop="c86j" label="86简码" width="70" align="center"/>
          <el-table-column prop="c98" label="98编码" width="70" align="center"/>
          <el-table-column label="拆字图(98版)" align="center">
            <template #default="scope">
              <div style="align-items: center; text-align: center;">
                <img :src="'https://www.iamwawa.cn/Data/wubi/'+scope.row.hanzi+'.png'" height='28'/>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="py" label="拼音" width="70" align="center"/>
          <el-table-column prop="bh" label="笔数" width="70" align="center"/>
        </el-table>
      </div>
    </div>
    <div class="img_p">
      <template :interval="3000" style="display: block;">
        <div class="block text-center" style="height: 500px">
          <el-carousel height="auto" autoplay>
            <el-carousel-item style="height:500px;">
              <img src="@/assets/zg-p.png"/>
            </el-carousel-item>
            <el-carousel-item style="height:500px;">
              <img src="@/assets/zg-xsj.webp"/>
            </el-carousel-item>
            <el-carousel-item style="height:500px;">
              <img src="@/assets/zg-98.webp"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
/* 暗黑\明亮样式 */
import 'element-plus/theme-chalk/dark/css-vars.css'
import { useDark, useToggle } from '@vueuse/core'

export default {
  props: [],  //https://www.iamwawa.cn/Data/wubi/{{item.hanzi}}.png
  data() {
    return {
      word: '',
      errMsg: '',
      tableData: [],
      showResult: false , // 显示结果
      isDark: false,
      showMsg: false
    }
  },
  //启动就加载
  created () {
    //utools.showNotification('欢迎使用')
    this.isDark = useDark({
      // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
      storageKey: 'useDarkKEY',
      // 暗黑class名字
      valueDark: 'dark',
      // 高亮class名字
      valueLight: 'light',
    })
    //this.isDark = window.utools.isDarkColors()
    //useToggle(this.isDark)
  },
  mounted() {
    //this.theme = this.isDark.value?'dark':'light'
    //重新在视图上完成渲染后，在执行里面的方法
    this.$nextTick(function () { })
  },
  methods: {
    init() {
      this.showResult = false
      this.showMsg = false
    },
    //切换主题
    toggleDark() {
      useToggle(this.isDark)
      console.log("this.isDark===", this.isDark)
    },
    handleSearch() {
      this.showResult = false;
      this.init();

      if(!this.word) {
        this.showMsg = true;
        this.errMsg = "请输入要查询的文字"
        return
      }
      this.$api.findZHList(this.word).then(res => {
        if(res == null || res.length == 0) {
          this.showMsg = true;
          this.errMsg = "输入错误，请输入要查询的文字"
          return
        }
        this.searchData(res)
        //console.log("list===>", this.list);
      })
    },
    keydown() {
      //console.log("word==>", this.word);
      if(this.word == undefined || this.word.trim().length == 0) {
        this.showResult = false
        this.showMsg = false
      }
    },
    searchData(res) {
      this.tableData = [];
      for (var i = 0; i < res.length; i++) {
        var n = res[i];
        var list = this.$global.ALL.filter((item) => { return item.hanzi == n; });
        if (list) {
          this.tableData.push(list[0])
          this.showResult = true;
        }
      }
    }
  }
}
</script>

<style scoped>
.el-input { width: 85%; float: left; }
.setting {width: 84px; float: left; display: block; }
.tool-result {
  border-bottom: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1rem;
  color: #555;
  background-image: none;
  margin-bottom: 0.2rem;
  word-break: break-word;
  width: 85%;
  margin: 7px 0 0 80px;
}
.msg {color: red; text-align: left; padding: 0px 15px 0 82px;display: block;}
.main{ padding: 5px 4px; text-align: center; width: 100%;}
.img_p { padding: 5px; margin-top: 10px; }
.img_p img{ width: 75%;}
.search { width: 99%;  text-align: center; line-height: 36px;}
::v-deep .el-carousel__arrow { top: 160px; }

/* 暗黑下图片处理 */
.dark img { filter: brightness(0.8) saturate(1.25) }

</style>
